<!DOCTYPE HTML>
<html>
<head>
    <title>Double Fault v0.1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="js/sm.js"></script>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jqtouch.min.js"></script>
    <script type="text/javascript" src="js/jqt.floaty.js"></script>

    <style type="text/css" media="screen">@import "css/jqtouch.min.css";</style>
    <style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>
    <style type="text/css" media="screen">@import "css/df.css";</style>

    <script type="text/javascript">

    cache = window.applicationCache;
    if (cache.status == window.applicationCache.UPDATEREADY) {
        alert("Cache update ready");
        cache.update();
    }

    var jQT = new $.jQTouch({
        addGlossToIcon: false,
        icon: 'icon.png',
        startupScreen: 'startup.png',
        statusBar: 'black',
        preloadImages: [
            'themes/jqt/img/button.png',
            'themes/jqt/img/back_button.png',
            'themes/jqt/img/back_button_clicked.png',
            'themes/jqt/img/button_clicked.png',
            'themes/jqt/img/whiteButton.png',
            'themes/jqt/img/toolbar.png'
            ]
    });

    $(document).ready(function(){
        create_db();
        init();

        //dynamic classes that control the clicks

        //EVENT HANDLING
        //$('#servposr, #servposl').click(startServ);
        //$('#recvposr, #recvposl').click(startRecv); 
        $('#recvpos').click( function() {
            startReceive();
            $('#recvpos').removeClass('active');
        });
        $('#servpos').click( function() {
            startServe();
            $('#servpos').removeClass('active');
        });

        $('#stat_content').bind('pageAnimationStart', function(e, info){ showStats(); });
        $('#archive').bind('pageAnimationStart', function(e, info){ archive_clk(); });
        $('#setup').bind('pageAnimationEnd', function(e, info) { setup_clk(); });
        $('#setup_submit').bind('click', function(e, info) { setup_submit_clk(); });

        $('#togglefloaty').click(function() {
            showScore();
            $(this).removeClass('active');
            return false;
        });

        $('.floaty').makeFloaty({
           spacing: 10,
           time: '1s'
        });
        $('.floaty').hideFloaty();

    });
    </script>
</head>

<body>

<div id="home">
    <div id="field">

        <div id="out_err" class="out-area">&nbsp;</div>

        <div id="court">
            <div id="rse" class="area alley"> </div>
            <div id="cm" class="area center-mark"> </div>
            <div id="lse" class="area alley"> </div>

            <div id="lsc" class="area serv-court">
                <div id="lsc_ace" class="area sc-area highlight">ACE</div>
                <div id="lsc_winner" class="area sc-area highlight">WIN</div>
                <div id="lsc_return" class="area sc-area highlight">RET</div>
                <div id="net_l" class="area net-err highlight">NET</div>
            </div>
            <div id="rsc" class="area serv-court">
                <div id="rsc_ace" class="area sc-area highlight">ACE</div>
                <div id="rsc_winner" class="area sc-area highlight">WIN</div>
                <div id="rsc_return" class="area sc-area highlight">RET</div>
                <div id="net_r" class="area net-err highlight">NET</div>
            </div>

            <div id="b_lse" class="area alley"></div>

            <div id="b_rsc" class="area serv-court">
                <div id="b_rsc_ace" class="area sc-area highlight">ACE</div>
                <div id="b_rsc_winner" class="area sc-area highlight">WIN</div>
                <div id="b_rsc_return" class="area sc-area highlight">RET</div>
                <div id="b_net_l" class="area net-err highlight">NET</div>
            </div>
            <div id="b_lsc" class="area serv-court">
                <div id="b_lsc_ace" class="area sc-area highlight">ACE</div>
                <div id="b_lsc_winner" class="area sc-area highlight">WIN</div>
                <div id="b_lsc_return" class="area sc-area highlight">RET</div>
                <div id="b_net_r" class="area net-err highlight">NET</div>
            </div>
            <div id="b_rse" class="area alley"></div>
            <div id="b_cm" class="area center-mark"></div>
        </div> <!-- court end -->

        <div id="b_out_err" class="out-area">&nbsp;</div>

        <ul class="buttonbar">
          <li><a href="#" id="servpos">Serve</a></li>
          <li><a href="#" id="recvpos">Receive</a></li>
        </ul>
        <!--
        <ul class="buttonbar">
          <li><a href="#" id="recvposl">Receive</a></li>
          <li id="servposl"><a href="#">Serve</a></li>
          <li id="servposr"><a href="#">Serve</a></li>
          <li id="recvposr"><a href="#">Receive</a></li>
        </ul>
        <div class="serv-recv">
            <button id="servposr" style="width: 15%; height: 80%" class="ui-state-default">S</button>
            <button id="servposl" style="width: 15%; height: 80%" class="ui-state-default">S</button>
            <button id="recvposl" style="width: 15%; height: 80%" class="ui-state-default">R</button>
            <button id="recvposr" style="width: 15%; height: 80%" class="ui-state-default">R</button>
        </div>
        -->
    </div> <!-- field end -->

    <ul class="menubar">
          <li><a href="#setup">Setup</a></li>
          <li><a href="#stat_content">Stats</a></li>
          <li><a href="#" id="togglefloaty">Score</a></li>
          <li><a href="#archive">Archive</a></li>
          <li><a href="#help">Help</a></li>
    </ul>

    <div id="comment" class="statusbar">Version 1.0</div>

</div>

<!-- Setup -->
<div class="form" id="setup">
    <div class="toolbar">
        <h1>Setup</h1>
        <a href="#home" class="button back">Home</a>
    </div>
    <form name="setup_form">
        <ul class="edit rounded">
            <li><input type="text" id="player" name="player" placeholder="Player"></li>
            <li><input type="text" id="opponent" name="opponent" placeholder="Opponent"></li>
            <li><input type="text" id="email" name="email" placeholder="Email"></li>
        </ul>
        <ul id="setup_info" class="">
        </ul>
        <ul class="rounded">
          <li><a href="#" id="setup_submit" class="goback">Submit</a></li>
        </ul>
    </form>
</div>

<div class="floaty">
<table border=0 cellpadding=3px cellspacing=1px>
    <tr colspan=6>
    <td style=""> <span id="sc_comment"></span> </td>
    </tr>
    <tr>
    <td style=""> <span id="p1_name"></span> </td>
    <td> </td>
    <td style=""> <span id="p1_score"></span> </td>
    <td> </td>
    <td style=""> <span id="p1_set1"></span> </td>
    <td style=""> <span id="p1_set2"></span> </td>
    <td style=""> <span id="p1_set3"></span> </td>
    <td style=""> <span id="p1_tb"></span> </td>
    </tr>
    <tr>
    <td style=""> <span id="p2_name"></span> </td>
    <td> </td>
    <td style=""> <span id="p2_score"></span> </td>
    <td> </td>
    <td style=""> <span id="p2_set1"></span> </td>
    <td style=""> <span id="p2_set2"></span> </td>
    <td style=""> <span id="p2_set3"></span> </td>
    <td style=""> <span id="p2_tb"></span> </td>
    </tr>
</table>
</div>

<div id="stat_content">
    <div class="toolbar">
        <h1>Stats</h1>
        <a href="#home" class="button back">Home</a>
    </div>
    <table class="" width="100%" border="1" cellspacing="0" cellpadding="3">
    <tr>
        <td width=50%>Name</td>
        <td><span id="p1_name1"></span> </td>
        <td><span id="p2_name1"></span> </td>
    </tr>
    <tr>
        <td>Double Faults</td>
        <td><span id="p1_dbl_flt"></span> </td>
        <td><span id="p2_dbl_flt"></span> </td>
    </tr>

    <tr>
        <td>Net Errs</td>
        <td><span id="p1_net_err"></span> </td>
        <td><span id="p2_net_err"></span> </td>
    </tr>

    <tr>
        <td>Aces</td>
        <td><span id="p1_aces"></span> </td>
        <td><span id="p2_aces"></span> </td>
    </tr>

    <tr>
        <td>2nd Serve Aces</td>
        <td><span id="p1_sec_aces"></span> </td>
        <td><span id="p2_sec_aces"></span> </td>
    </tr>

    <tr>
        <td>Serve Winners</td>
        <td><span id="p1_serv_winners"></span> </td>
        <td><span id="p2_serv_winners"></span> </td>
    </tr>

    <tr>
        <td>2nd Serve Winners</td>
        <td><span id="p1_sec_serv_winners"></span> </td>
        <td><span id="p2_sec_serv_winners"></span> </td>
    </tr>
    </table>
</div>


<div id="debug" class='ui-widget-header'>Debug Version 1.0</div>

<div id="alert" class='ui-widget-content'>
</div>

<div id="matchover" class='ui-widget-content'>
</div>


<div id="dialog" title="Statistics"></div>

<!-- Archive -->
<div id="archive">
    <div class="toolbar">
        <h1>Archive</h1>
        <a href="#home" class="button back">Home</a>
    </div>
    <h2> Saved Matches </h2>
    <ul id="archive_list" class="rounded">
    </ul>
</div>

<!-- Help -->
<div id="help">
    <div class="toolbar">
        <h1>Help</h1>
        <a href="#home" class="button back">Home</a>
    </div>
    <div class="statusbar">
        <p>
        <strong>Introduction</strong>
        Double Fault will help you keep track of the stats of your kids tennis games.
        The stats are stored in a local database to easily track his/her performance.
        <br>
        To enjot the App in full screen mode, tap the '+' button at the bottom of the screen 
        and tap "Add to Home Screen". This will create an icon on your Home Screen called
        "Double Fault"<br>
        <br>
        </p>
        <br>
        <p style="text-align: left;">
        <bold>Instructions</bold>
        <br>

        To start a game hit "Setup" and enter the email address and other details.<br>

        To start a serve or to receive a serve, tap the S or R buttons respectively 
        based on what side of the court your player is serving or receving the serve.<br>
        <br>

        The highlighted areas either activate a point over areas or a fault area.
        So if you hit on the winning areas like ACE or WIN, the score for that player is incremented.<br>
        <br>

        If you tap any of the error areas the opponents score is incremented.<br>

        <br>
        If you tap any of the net areas or fault areas the serve will be counted as first serve.<br>
        <br>

        All the scores are kept by the App based on how the user taps the screen.<br>
        <br>

        In case you close the App on reload the App will load the incomplete match data from the 
        database.<br>

        Once the match is over, the match data is archived in the database. The next time you load
        the App or select Setup a new match is created.
        <br>

        To undo an action just retap the S or R button and the score for that point will not counted<br>
        <br>


    </div>
</div>
</body>
</html>
